<template>
  <Modal
    v-model="modal"
    title="测试"
    :closable="false"
    :mask-closable="false"

  >
    <div class="test-top">
      <span>测试数据</span>
      <div>
        <a v-show="inputListObj.items.length > 0" href="javascript:void(0);" style="marginRight: 10px" @click="handleOk('testForm')">开始测试</a>
        <a v-show="inputListObj.items.length > 0" href="javascript:void(0);" @click="resetData">清空</a>
      </div>
    </div>
    <div v-show="inputListObj.items.length === 0" class="form-box no-data">暂无测试数据</div>
    <Form v-show="inputListObj.items.length > 0" ref="testForm" :model="inputListObj" :label-width="80" class="form-box">
      <Row>
        <Col span="12" v-for="(item, index) in inputListObj.items" :key="index">
          <FormItem
            :label="item.label"
            :prop="'items.' + index + '.value'"
            :rules="{ required: true, message: `${item.label}不能为空`, trigger: 'blur' }"
          >
            <Input type="text" v-model="item.value" placeholder="请输入测试数据"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <span>测试结果</span>
    <div class="result-table">
      <Table :columns="columns" :data="result" border :height="height"></Table>
    </div>
    <div slot="footer">
      <Button type="primary" @click="handleCancel">关闭</Button>
    </div>
  </Modal>
</template>

<script>
import { testDecisionFlowContent } from '../../../api/decision-flow'
export default {
  data () {
    return {
      modal: false,
      result: [],
      height: 'auto',
      columns: [{
        title: '输出数据',
        key: 'key'
      }, {
        title: '输出值',
        key: 'value'
      }],
      inputListObj: {
        items: []
      }
    }
  },
  methods: {
    show (obj) {
      this.modal = true
      this.paramsObj = obj
      const pathname = location.pathname
      const { inputDataList = [] } = this.$store.state.app.dataStructure[pathname]
      const mapInputDataList = inputDataList.map(ele => {
        return {
          code: ele.dataCode,
          label: ele.dataName,
          value: ''
        }
      })
      this.inputListObj.items = mapInputDataList
    },
    resetData () {
      this.inputListObj.items.forEach(ele => {
        ele.value = ''
      })
      this.result = []
      this.height = 'auto'
    },
    handleOk (refsName) {
      this.$refs[refsName].validate((validate) => {
        if (validate) {
          const argsObj = {}
          this.inputListObj.items.forEach(ele => {
            argsObj[ele.code] = ele.value
          })
          this.paramsObj.args = argsObj
          // console.log(111, this.inputListObj.items, this.paramsObj);
          testDecisionFlowContent(this.paramsObj).then((result) => {
            const { code, data = [], msg } = result.data
            if (code === 2000) {
              this.$Message.success('测试完成')
              this.result = data
              this.height = data.length < 2 ? 'auto' : 150
            } else {
              this.$Message.error(msg)
            }
          })
        } else {

        }
      })
    },
    handleCancel () {
      this.modal = false
      this.result = []
      this.height = 'auto'
    }
  }
}
</script>

<style scoped>

</style>
